
import React, { Fragment } from 'react'
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity, FlatList, KeyboardAvoidingView, Keyboard, Dimensions } from 'react-native'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import CustomFlatList from 'src/components/custom-flat-list/index'
import { ScaleS, ScaleT, ONE_PIXEL, WIDTH, HEIGHT, IS_IOS, IS_IPHONEX } from 'src/utils/ScreenUtil'
import {
  applyUpByUserId,
  sharePost,
  collectionPost,
  askCollectionChannel,
  delByValue,
  updateChatTopByApp
} from '@utils/RequestAPI'
import DeviceStorage from '@utils/DeviceStorage'
import { shareToWXMiniProgram } from 'src/utils/PayUtil'
import CollectionMsg from './components/CollectionMsg'// 收藏
import TextInputCustom from './components/TextInputCustom'
import { CommonToast } from 'src/utils/ToastUtil'
import NavigationUtil from 'src/utils/NavigationUtil'
import { showTipModal, showModal } from 'src/utils/ModalUtil'
import WhiteWrap from 'src/pageP/home/home-page/components/WhiteWrap'
import ThreeDotComponent from 'src/pageP/home/home-page/components/ThreeDotComponent'
import { getUserAvatorLocalCByGender } from 'src/utils/ConfigUtil'
import RootSiblings from 'react-native-root-siblings'

import { searchChatGroupByChannelId } from 'src/utils/RequestAPI'
import moment from 'moment'
import { getDateDiff } from 'src/utils/TimeUtil'
import { wsURL } from 'src/config/index'
import { isArrayFn, isObjectFn } from 'src/utils/JSTypeUtil'
// const WSURL = 'ws://dailychatserver.renzhichu.cn/chat-server'
const WSURL = 'ws://192.168.0.188:8080/chat-server'

const SIGN_UP = 2
const ASK_QUESTION = 3
const INPUT = 4

export default class QueryQuestion extends React.Component {
  static propTypes = {
    data: PropTypes.array,
    onShareClick: PropTypes.func,
    isCollection: PropTypes.number,
    isSignUp: PropTypes.bool,
    channelId: PropTypes.number,
    userinfo: PropTypes.object,
    channel: PropTypes.object,
    landmark: PropTypes.object,
    handlePlacedTop: PropTypes.func
  }

  constructor(props) {
    super(props)
    this.state = {
      data: [
        // {
        //   senderInfo: {
        //     name: '小王'
        //   },
        //   cityName: '上海大学',
        //   top: true,
        //   body: '很高兴认识你',
        //   sendTime: '2019-10-20'
        // },
      ],
      boolBtn: SIGN_UP,
      boolAsk: true,
      btnDisable: false,
      jobDetail: {},
      topBoolean: true
    }
  }

  componentWillUnmount() {
    this.handleClose()
    this.webSocket = null
  }

  componentDidMount() {
    this._judgeTime()
    this.updateScoket()
  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevProps.userinfo.userId && this.props.userinfo.userId) {
      this.updateScoket()
    }
  }

  _customFlatListRef = (ref) => {
    this.flatListRef = ref
  }

  _judgeTime = () => {
    // 直播开始30分钟前可以报名（判断状态是否已经报名）
    // 30分钟后 则变为 提问
    const { channel } = this.props
    this.handlePostState(channel)
    const { isSignUp } = this.props
    // 未报名
    if (isSignUp) {
      this.setState({
        boolBtn: ASK_QUESTION, // 我要提问
        text: ''
      })
    }
  }

  // 报名状态处理
  postCountTimer = null

  freePostCountTimer = () => {
    this.postCountTimer && clearInterval(this.postCountTimer)
  }

  handlePostState = ({ startTime }) => {
    const fireTime = moment(startTime).unix() // 开播时间
    const limitTime = 1800 // 开播前半小时截止报名
    if (fireTime - moment().unix() <= limitTime) {
      this.setState({
        boolBtn: ASK_QUESTION, // 我要提问
        text: ''
      })
      return // 不能报名 变成提问
    }
    this.postCountTimer = setInterval(() => {
      if (fireTime - moment().unix() <= limitTime) {
        this.setState({
          boolBtn: ASK_QUESTION // 我要提问
        })
        this.freePostCountTimer()
      }
    }, 1000)
  }

  // 报名
  _signUp = () => {
    const { channelId, userinfo: { userId } } = this.props
    if (NavigationUtil.jumpLogin()) return
    applyUpByUserId({ params: { channelId: channelId, userId: userId } }).then((data) => {
      CommonToast('报名成功')
      this.setState({
        boolBtn: ASK_QUESTION,
        btnDisable: true
      })
    }, e => {
      this.setState({
        boolBtn: ASK_QUESTION,
        text: ''
      })
      // CommonToast(e)
      console.log(e, 'err')
    })
  }

  // 分享
  _onSharedClick = () => {
    if (NavigationUtil.jumpLogin()) return
    this.props.onShareClick()
  }

  // 收藏
  _onCollected = isCollected => {
    if (NavigationUtil.jumpLogin()) return
    this.favoriteClick(isCollected)
  }

  // (取消)收藏的接口
  favoriteClick = (isCollected) => {
    askCollectionChannel({
      params: {
        channelId: this.props.channelId,
        userId: this.props.userinfo.userId
      }
    }).then(data => {
      console.log(data, '收藏')
      this.props.changeCollection(isCollected)
    }, err => {
      console.log(err)
    })
  }

  _askQuestions = () => {
    const { isCollection } = this.props
    const { text } = this.state
    switch (this.state.boolBtn) {
      case 1:
        return null
      case SIGN_UP:
        return (<View style={styles.bottomLine}>
          <CustomButton style={styles.bottomBtm} onPress={this._signUp} disabled={this.state.btnDisable}>
            <Text style={styles.bottomBtmText}>立即报名</Text>
          </CustomButton>
          <View style={styles.bottomIcon}>
            <CollectionMsg
              isCollected={isCollection}
              onCollected={this._onCollected} />
            <CustomButton
              style={styles.bottomButton}
              onPress={this._onSharedClick}
            >
              <CustomImage source={require('src/imgC/live/btnShare.png')} />
            </CustomButton>
          </View>
        </View>)
      case ASK_QUESTION:
        return (<View style={styles.bottomLine}>
          <TouchableOpacity
            onPress={this._askQuestionsBool}
            style={styles.bottomBtm}
          >
            <Text style={styles.bottomBtmText}>我要提问</Text>
          </TouchableOpacity>
          <View style={styles.bottomIcon}>
            <CollectionMsg
              isCollected={isCollection}
              onCollected={this._onCollected} />
            <CustomButton
              style={styles.bottomButton}
              onPress={this._onSharedClick}
            >
              <CustomImage source={require('src/imgC/live/btnShare.png')} />
            </CustomButton>
          </View>
        </View>)
      // case INPUT:
      //   return (<View style={[styles.bottomLine, { paddingBottom: ScaleS(10) }]}>
      //     {/* <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={-100} style={styles.container}> */}
      //     <TextInput
      //       ref={this._inputRefFunc}
      //       placeholder={'我想问一问...'}
      //       style={[styles.inputStyle]}
      //       onChangeText={(textVal) => this.setState({ text: textVal })}
      //       value={text}
      //       maxLength={500}
      //       returnKeyType="send"
      //       onSubmitEditing={this.handleSend}
      //     />
      //     {/* </KeyboardAvoidingView> */}
      //   </View>)
      default:
        return null
    }
  }

  _showInputContainer = () => {
    const { text } = this.state
    if (this.inputShow) {
      return
    }
    this.inputShow = new RootSiblings(
      <TextInputCustom
        val={text}
        valChanged={val => this.setState({ text: val })}
        inputRefFunc={this._inputRefFunc}
        handleSend={this.handleSend}
        hideInputContainer={this._hideInputContainer}
      />
    )
  }

  _askQuestionsBool = (item) => {
    if (NavigationUtil.jumpLogin()) return
    this._showInputContainer()
    setTimeout(() => {
      if (item && item.item && item.item.senderInfo) {
        this.inputRef && this.inputRef.props.onChangeText(`@${item.item.senderInfo.name} `)
      } else {
        this.inputRef && this.inputRef && this.inputRef.clear()
      }
      this.inputRef && this.inputRef.focus()
    }, 100)
  }

  _hideInputContainer = () => {
    this.inputShow && this.inputShow.destroy()
    this.inputShow = null
  }

  _inputRefFunc = ref => {
    this.inputRef = ref
  }

  render() {
    const { data } = this.state
    return (
      <View style={styles.scene}>
        <CustomFlatList
          ref={this._customFlatListRef}
          style={styles.listSty}
          data={data}
          refreshing={false}
          // onHeaderRefresh={}
          // ListEmptyComponent={}
          // onScroll = {
          //   ({
          //     nativeEvent: {
          //       contentOffset: { y }
          //     }
          //   }) => {
          //     console.log('y', y)
          //   }
          // }
          renderItem={this._renderItem}
          showsVerticalScrollIndicator={false}
          // getItemLayout={(data, index) => (
          //   { length: 150, offset: 150 * index, index }
          // )}
          pullDown={false}
          pullUp={false}
        />
        {/* <View style={[{ alignSelf: 'baseline', marginHorizontal: ScaleS(20) }]}> */}
        {this._askQuestions()}
        {/* </View> */}
      </View>
    )
  }

  /**
   * 每一条的样式
   * @param item
   * @param index
   * @returns {XML}
   * @private
   */
  _renderItem = ({ item, index }) => {
    const { handlePlacedTop, userinfo, admins } = this.props
    const { senderInfo: { avatarPath, gender, userId, name } = {} } = item
    return (
      <CustomButton key={index} style={styles.itemView} onPress={this._askQuestionsBool} params={{ item, index }}>
        <CustomImage style={[styles.leftImg, { resizeMode: 'cover' }]} source={
          avatarPath
            ? { uri: avatarPath }
            : getUserAvatorLocalCByGender(gender, userId)} />
        <View>
          <View style={styles.top}>
            <View style={styles.topLeft}>
              <View style={{ paddingLeft: ScaleS(10) }}>
                <Text style={styles.name}>{name}</Text>
                <CustomButton onPress={handlePlacedTop} params={{ index }}>{item.top && <View><CustomImage style={[styles.imgTop]} source={require('src/imgC/live/top.png')} /><Text style={styles.fastText}>顶</Text></View>}</CustomButton>
                <Text style={styles.addTime}>{item.cityName ? `${item.cityName} · ` : ''}{item.sendStrTime}</Text>
              </View>
            </View>
          </View>
          <View style={styles.saybody}>
            <Text>{item.body}</Text>
          </View>
        </View>
        {/* 判断管理员 */}
        {admins && admins.length !== 0 ? admins.map((element, i) => {
          return (element.phone === userinfo.mobile) ? (<CustomButton key={{ i }} style={styles.threeDotView} onPress={this._threeDotPress} params={{ item, index }}>
            <CustomImage style={styles.threeDotImg} source={require('src/imgC/triangle/grouping.png')} />
          </CustomButton>) : null
        }) : null}
      </CustomButton>
    )
  }

  _testDelete = (item, index) => {
    this.deletModal = showTipModal({
      params: { item, index },
      titleText: '提醒',
      contentText: '确定要删除吗？',
      onCancel: this.onTipCancel, // 取消
      onConfirm: this.handleDelete// 确定
    })
  }

  _threeDotPress = ({ item }) => {
    console.log(item.top, '三个点')
    this.dotArr = []
    if (item.top) {
      // 已经收藏
      this.dotArr.push({
        label: '取消置顶',
        type: 2,
        item
      })
    } else {
      this.dotArr.push({
        label: '置顶',
        type: 1,
        item
      })
    }
    this.dotArr.push({
      label: '删除',
      type: 3,
      item
    })
    this.threeDotPress(item)
  }

  /**
   * 点击三个点的回调
   */
  threeDotPress = (item, index) => {
    this.showDotModal = showModal(this._threeDotModal(item, index))
  }

  _threeDotModal = params => {
    console.log(params, this.dotArr, 'params')
    return (
      <WhiteWrap>
        <ThreeDotComponent
          dataArr={this.dotArr}
          params={params}
          itemClick={this._itemDotClick}
        />
      </WhiteWrap>
    )
  }

  roofPlacement = (item) => {
    this.deletModal = showTipModal({
      params: { item },
      titleText: '提醒',
      contentText: item.top ? '确定要取消置顶吗？' : '确定要置顶吗？',
      onCancel: this.onTipCancel, // 取消
      onConfirm: this.handleChatTop// 确定
    })
  }

  onTipCancel = () => {
    this.deletModal.close()
  }

  _itemDotClick = ({ item, params }) => {
    this.showDotModal.close(() => {
      switch (item.type) {
        case 1: // 置顶
          // this.roofPlacement(item)
          this.handleChatTop({ item })
          break
        case 2: // 取消置顶
          // this.roofPlacement(item)
          this.handleChatTop({ item })
          break
        case 3: // 删除
          // this._testDelete(item)
          this.handleDelete({ item })
          break
      }
    })
  }

  // 删除
  handleDelete = ({ item, index }) => {
    console.log(item, 'item4')
    if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
      this.webSocket.send(
        JSON.stringify({
          actType: "Del",
          messageId: item.item.messageId,
        })
      )
    }
  }

  // 置顶
  // ChatTop
  handleChatTop = ({ item }) => {
    this.setState({
      topBoolean: !this.state.topBoolean
    })
    if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
      if (item.item.top === false) {
        this.webSocket.send(
          JSON.stringify({
            actType: "Top",
            messageId: item.item.messageId,
          })
        )
      } else if (item.item.top === true) {
        this.webSocket.send(
          JSON.stringify({
            actType: "Untop",
            messageId: item.item.messageId,
          })
        )
      }
    }
  }

  webSocket = null

  updateScoket = () => {
    const { channelId, userinfo: { userId, access_token = 'anonymous' } } = this.props
    // debugger
    searchChatGroupByChannelId({
      params: {
        channelId
      }
    }).then(res => {
      this.setState({
        chatId: res.data
      })
      // this.chatId = res.data
      // this.webSocket = new WebSocket('ws://192.168.0.188:8080/chat-server?chatId=' + res.data, '53c0c547-6cfc-4acb-be22-b5a99f25b655');
      if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
        this.handleClose()
      } else {
        // this.webSocket = new WebSocket('ws://192.168.0.188:8080/chat-server?chatId=' + res.data, '53c0c547-6cfc-4acb-be22-b5a99f25b655');
        this.webSocket = new WebSocket(wsURL + '?chatId=' + res.data, access_token)
        this.handleOpen()
      }
    })
    // this.chatId = res.data
    // this.webSocket = new WebSocket('ws://192.168.0.188:8080/chat-server?chatId=' + res.data, 'a6271716-6f39-4ce4-ad50-12fccc98f516');
    // this.webSocket = new WebSocket(wsURL + '?chatId=' + res.data, this.props.userinfo.access_token);
    // this.handleOpen()
  }

  // WebSocket
  lockReconnect = false;

  // 避免重复连接
  tt;

  // 心跳检测
  heartCheck = {
    timeout: 3000,
    timeoutObj: null,
    serverTimeoutObj: null,
    start: () => {
      var self = this
      this.timeoutObj && clearTimeout(this.timeoutObj)
      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
      this.timeObj = setTimeout(() => {
        // 这里发送一个心跳，后端收到后，返回一个心跳信息，
        // onmessage拿到返回的心跳就说明连接正常
        // console.log('0000');
        this.webSocket.send(0x9)
        this.webSocket.onmessage = (e) => {
          console.log(e, 'e')
        }
        self.serverTimeoutObj = setTimeout(() => {
          // console.log(111);
          // console.log(this.webSocket);
          // this.webSocket.close();
          // createWebSocket();
        }, self.timeout)
      }, this.timeout)
    }
  }

  // 重连
  t1

  reconnect = () => {
    if (this.lockReconnect) return
    this.lockReconnect = true
    this.t1 = setTimeout(() => { // 没连接上会一直重连，设置延迟避免请求过多
      this.updateScoket()
      this.lockReconnect = false
    }, 2000)
  }

  // 开启连接
  handleOpen = () => {
    this.webSocket.onopen = () => {
      // console.log('webSocket open');
      // this.heartCheck.start()
    }
    this.webSocket.onerror = () => {
      this.reconnect()
    }
    // 拿到返回
    this.webSocket.onmessage = (e) => {
      // this.heartCheck.start()
      const newdata = JSON.parse(e.data)
      if (isArrayFn(newdata)) {
        this.setFlatlistData(newdata)

        // souci
      } else if (isObjectFn(newdata)) {
        // debugger
        if (newdata.msgType === 'G') {
          if (!newdata.actType) {
            const data = this.state.data
            console.log(data, 'data')
            let index = null
            let list1 = data.filter((item, i) => {
              // return item.top === true
              if (item.top) {
                return index = i + 1
              }
            })
            // data.some((e, i) => {
            //   if (!e.top) {
            //     //
            //     index = Math.max(0, i - 1)
            //     console.log(index, 'index1')
            //     return true
            //   }
            //   if (i === data.length - 1 && e.top) {
            //     index = data.length
            //     console.log(index, 'index2')
            //   }
            // })
            if (index === null) {
              index = 0
            }
            data.splice(index, 0, newdata)
            // data.splice(3, 0, newdata)
            this.setFlatlistData(data)

          } else if (newdata.actType === 'Del') {
            const data = this.state.data
            let index = null
            data.some((e, i) => {
              if (e.messageId === newdata.messageId) {
                index = i
                return true
              }
            })
            if (index !== null) {
              data.splice(index, 1)
              this.setFlatlistData(data)
            }

          } else if (newdata.actType === 'Top') {
            const data = this.state.data
            let index = null
            data.some((e, i) => {
              if (e.messageId === newdata.messageId) {
                index = i
                return true
              }
            })
            if (index !== null) {
              const oldChat = data.splice(index, 1)[0]
              oldChat.top = true
              index = null
              data.some((e, i) => {
                if (e.top && moment(oldChat.sendStrTime).unix() > moment(e.sendStrTime).unix()) {
                  //
                  index = i
                  return true
                }
                if (!e.top) {
                  index = i
                  return true
                }
                if (i === data.length - 1) {
                  index = data.length
                }
              })
              if (index === null) {
                index = 0
              }
              data.splice(index, 0, oldChat)
              this.setFlatlistData(data)
            }
          } else if (newdata.actType === 'Untop') {
            const data = this.state.data
            let index = null
            data.some((e, i) => {
              if (e.messageId === newdata.messageId) {
                index = i
                return true
              }
            })
            if (index !== null) {
              const oldChat = data.splice(index, 1)[0]
              oldChat.top = false
              index = null
              data.some((e, i) => {
                if (!e.top && moment(oldChat.sendStrTime).unix() > moment(e.sendStrTime).unix()) {
                  //
                  index = i
                  return true
                }
                if (i === data.length - 1) {
                  index = data.length
                }
              })
              if (index === null) {
                index = 0
              }
              data.splice(index, 0, oldChat)
              this.setFlatlistData(data)
            }
          }
        }
        // dantiao xiaoxi
      }
    }
    this.webSocket.onclose = () => {
      if (this.webSocket) {
        this.reconnect()
      }
    }
  }

  handleSend = () => {
    // 发送信息
    if (this.state.text && this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
      this.webSocket.send(
        JSON.stringify({
          body: this.state.text,
          actType: ''
        })
      )
      this.setState({
        text: ''
      })
      // // 拿到返回
      // this.webSocket.onmessage = (e) => {
      //   // this.heartCheck.start()
      //   // console.log("收到的信息" + e.data);
      //   this.setState({
      //     data: this.state.data.concat(JSON.parse(e.data))
      //   })
      // }
    } else {
      this.handleOpen()
    }
  }

  // 关闭连接
  handleClose = () => {
    if (this.webSocket) {
      this.webSocket.close()
    }
    // this.webSocket = null;
    this.t1 && clearTimeout(this.t1)
  }

  setFlatlistData = (data = []) => {
    // if (this.ChatTop && this.ChatTop.item && this.ChatTop.item.item) {
    //   this.setState({
    //     // data: data.filter((item) => { return item.actType === null || !item.actType !== '' || item.actType !== undefined }),
    //     data: [this.ChatTop.item.item, ...data]
    //   }, () => {
    //     setTimeout(() => {
    //       if (this.flatListRef && this.flatListRef.flatListRef) {
    //         this.flatListRef.flatListRef.scrollToOffset({ offset: 0, animated: false })
    //       }
    //     })
    //   })
    // } else {
    this.setState({
      data: data
    }, () => {
      setTimeout(() => {
        if (this.flatListRef && this.flatListRef.flatListRef) {
          this.flatListRef.flatListRef.scrollToOffset({ offset: 0, animated: false })
        }
      })
    })
    // }
  }
}

const styles = StyleSheet.create({
  scene: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    flex: 1
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingHorizontal: 20,
    paddingTop: 20
  },
  askBtm: {
    position: 'relative',
    bottom: ScaleS(55),
    backgroundColor: 'white'
  },
  listSty: {
    // flex: 1,
    // alignSelf: 'flex-start',
    // marginTop: ScaleS(-20)
  },
  // container: {
  //   position: 'relative',
  //   backgroundColor: 'transparent'
  // },
  threeDotView: {
    height: ScaleS(17),
    alignItems: 'center',
    justifyContent: 'center'
  },
  bottomBtm: {
    width: ScaleS(135),
    height: ScaleS(47),
    borderRadius: ScaleS(24),
    backgroundColor: 'rgba(60, 60, 60, 1)',
    marginBottom: ScaleS(5)
  },
  bottomBtmText: {
    textAlign: 'center',
    lineHeight: ScaleS(47),
    color: '#FFFFFF',
    fontSize: ScaleS(16),
    fontWeight: '600',
    letterSpacing: ScaleS(1)
  },
  bottomIcon: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  bottomLine: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: ScaleS(20),
    paddingVertical: ScaleS(10),
    paddingBottom: IS_IPHONEX ? ScaleS(20) : ScaleS(10)
  },
  bottomButton: {
    marginLeft: ScaleS(15)
  },
  itemView: {
    width: WIDTH,
    flexDirection: 'row',
    // height: 110,
    marginTop: ScaleS(20),
    paddingHorizontal: ScaleS(20),
    overflow: 'hidden'
  },
  leftImg: {
    width: ScaleS(40),
    height: ScaleS(40),
    borderRadius: ScaleS(20),
    resizeMode: 'cover'
  },
  top: {
    flexDirection: 'row'
    // width: WIDTH - 40,
  },
  topLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  name: {
    fontSize: ScaleS(14),
    fontWeight: '500',
    color: 'rgba(0, 0, 0, 1)',
    paddingTop: ScaleS(5)
  },
  fastText: {
    color: '#000000',
    fontSize: ScaleT(12),
    fontWeight: '500',
    position: 'absolute',
    bottom: ScaleT(1),
    left: ScaleT(80),
  },
  imgTop: {
    position: 'absolute',
    bottom: ScaleT(6),
    left: ScaleT(75),
    width: ScaleS(22)
  },
  addTime: {
    fontSize: ScaleS(10),
    fontWeight: '400',
    color: '#818181',
    paddingTop: ScaleS(5)
  },
  topRightText: {
    textAlign: 'right',
    color: '#D8D8D8'
  },
  saybody: {
    fontSize: ScaleS(16),
    fontWeight: '300',
    color: '#000000',
    paddingLeft: ScaleS(10),
    marginTop: ScaleS(12),
    width: WIDTH - 100
  },
  bottomBtmList: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    height: ScaleS(20),
    lineHeight: ScaleS(20),
    paddingRight: ScaleS(20)
  },
  bottomSty: {
    paddingHorizontal: ScaleS(5),
    height: ScaleS(20),
    lineHeight: ScaleS(20),
    borderColor: '#cccccc',
    borderWidth: ScaleS(1),
    borderRadius: ScaleS(10),
    textAlign: 'center',
    marginLeft: ScaleS(20)
  },
  inputStyle: {
    width: WIDTH - ScaleS(40),
    height: ScaleS(40),
    backgroundColor: 'white',
    paddingHorizontal: ScaleS(15),
    borderRadius: ScaleS(20)
  },
  inputContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: WIDTH,
    height: HEIGHT,
    paddingBottom: ScaleS(10),
    backgroundColor: 'rgba(0,0,0,0.6)'
  }
})
